<template>
  <div class="user-add">
    新建居民档案
    <hr>
    <p>居民信息</p>
    <div class="user-message">
    <el-form :model="form" label-width="120px">
      <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-right: 8px;">姓名</span>
      <el-input v-model="form.name" style="width:200px; display: inline-block;" placeholder="请输入"/>
    </div>

    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">身份证号</span>
      <el-input v-model="form.date3" style="width:200px; display: inline-block;" placeholder="请输入"/>
      </div>
    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">性别</span>
        <el-select v-model="form.region" placeholder="请选择">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </div>
  </el-form>
  </div>
  <div>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration" style="color:#000">出生年月</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="请选择日期"
        :default-value="new Date(2022, 11, 8)"
        style="display:inline-block;
        margin-left: 30px;
        width: 160px;"
      />
    </div>
    </div>
    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">手机号码</span>
      <el-input v-model="form.date4" style="width:200px; display: inline-block;" placeholder="居民登录账号,请正确填写"/>
    </div>

    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">现居地</span>
      <el-input v-model="form.address" style="width:230px; display: inline-block;" placeholder="请输入"/>
    </div>

    </div>
    <div>
      <div style="display: inline-block;">
      <span style="margin-left: 5px; margin-right: 8px;">居民标签</span>
        <el-select
          multiple 
          v-model="value5"
          collapse-tags
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr5"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="display: inline-block; margin-left: 20px">
        <span style="margin-left: 100px; margin-right: 8px;">家庭成员</span>
        <el-link> +联家庭成员</el-link>
      </div>

      <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 230px; margin-right: 8px;">登录密码</span>
      <el-input v-model="form.password" style="width:220px; display: inline-block;" placeholder="8位以上的数字和字母组合"/>
    </div>
    </div>
    <hr>
    <div class="Butt">
      <el-button :plain="true" @click="open2" style="background:blue;color:#fff">保存</el-button>
      <el-button type="primary" class="butt-2" @click="toUserFash">完善居民档案</el-button>
      <el-button type="success" class="butt-3" @click="toUserQianyue">立即签约</el-button>
      <el-button type="primary" class="butt-4" style="background:#eee; color:#000" @click="toUserMange">返回</el-button>
    </div>
 </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { reactive } from 'vue'
import { ref } from 'vue'
import router from '../../router';

const value1 = ref('')
const value5 = ref([])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  date3:'',
  date4:'',
  address:'',
  password:'',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
function toUserMange () {
  router.push('/user-management/user-management')
}
const open2 = () => {
  ElMessage({
    message: '保存成功',
    type: 'success',
  })
}

const arr5 = [
  {
    value: '脂肪肝',
    label: '脂肪肝',
  },
  {
    value: '慢病护理',
    label: '慢病护理',
  },
  {
    value: '高血压',
    label: '高血压',
  },
  {
    value: '高血糖',
    label: '高血糖',
  },
]
function toUserFash () {
    router.push('/user-management/user-fash')
}
function toUserQianyue () {
  router.push('/user-management/user-qianyue')
}

</script>
<style scoped>
.demo-date-picker {
  display: inline-block;
  /* width: 100%; */
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-link {
  margin-right: 12px;
}
hr {
  color: #ccc;
}
</style>
